<%-- 
    Document   : department
    Created on : Apr 28, 2013, 7:11:47 PM
    Author     : wan.fairul
--%>
<%@ include file="/WEB-INF/jsp/include/page_header.jspf" %>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>.: Admin : Add Department :.</title>    
        <script type="text/javascript">
            $(function() {
                $("#dialog-form").dialog({
                    autoOpen: false,
                    height: 500,
                    width: 600,
                    modal: true,
                    buttons: {
                        "Save": function() {
                            var frm = document.forms.popupForm;
                            frm.action = frm.action + '?saveEditDepartment';
                            frm.submit();
                        },
                        Cancel: function() {
                            $(this).dialog("close");
                        }
                    },
                    close: function() {
                    }
                });

            });

            function removeDepartment(val) {
                var form = document.form1;
                var answer = confirm("Delete?");
                if (answer) {
                    form.action = '${pageContext.request.contextPath}/adminDepartment?deleteDepartment&departmentId=' + val;
                    form.submit();
                }
            }

            function unblockUI() {
                $.unblockUI();
            }

            function blockUI() {
                $.blockUI();
            }

            function editDepartment(departmentId) {
                var url = '${pageContext.request.contextPath}/adminDepartment?popupEditDepartment&departmentId=' + departmentId;
                $.get(url, function(data) {
                    $('#dialog-form').html(data);
                });
                $("#dialog-form").dialog("open");
            }

            function validateFirst() {
                var validate = true;
                var message = "All field are required";
                if ($("#name").val() === '')
                    validate = false;
                if ($("#target").val() === '')
                    validate = false;
                if (validate === false)
                    alert(message);
                return validate;
            }

            function isNumberKey(evt)
            {
                var charCode = (evt.which) ? evt.which : event.keyCode
                if (charCode > 31 && (charCode < 45 || charCode > 57 || charCode == 47))
                    return false;

                return true;
            }

        </script>
    </head>
    <body>
        <s:messages/>
        <s:errors/>
        <s:useActionBean beanclass="exatrez.stripes.util.ListUtil" var="list"/>
        <s:form beanclass="exatrez.stripes.action.DepartmentAction" name="form1">           
            <div>
                <fieldset>
                    <div id="page-title">
                        <span class="title">Add Department</span>
                    </div>
                    <p>
                        <label>Department Name :</label>
                        <s:text name="depart.departmentName" class="uppercase clearAll" id="name"/>
                    </p> 
                    <p>
                        <label>Ship Visit Target :</label>
                        <s:text name="depart.target" id="terget" onkeypress="return isNumberKey(event)" maxlength="3" class="clearAll"/>
                    </p> 
                    <p>
                        <label>&nbsp;</label>
                        <s:submit name="saveDepartment" value="Submit" class="btn" onclick="return validateFirst()"/>
                        <s:button name="clear" value="Clear" class="btn clear"/>
                    </p>
                </fieldset>
            </div>
            <div>
                <display:table class="tablecloth" name="${actionBean.listOfDepartment}" requestURI="/adminDepartment" id="line">
                    <display:column title="No." sortable="true">${line_rowNum}</display:column>
                    <display:column title="Department Name" property="departmentName" sortable="true"/>
                    <display:column title="Ship Visit Target" property="target" sortable="true"/>
                    <display:column title="Active" property="active"/>
                    <display:column title="Date Create"><fmt:formatDate value="${line.infoAudit.createDate}" pattern="dd/MM/yyyy"/> </display:column>
                    <display:column title="Modified By" property="infoAudit.updateId.userId"/>  
                    <display:column title="Action">
                        <p align="center">
                            <img alt='Click for Edit' border='0' src='${pageContext.request.contextPath}/images/icon/edit.png' 
                                 onclick="editDepartment('${line.departmentId}');
                return false;" onmouseover="this.style.cursor = 'pointer';">&nbsp;&nbsp;
                            <img alt='Click for Delete' border='0' src='${pageContext.request.contextPath}/images/icon/gnome_edit_delete.png' 
                                 width="20" height="20"  onclick="removeDepartment('${line.departmentId}')" onmouseover="this.style.cursor = 'pointer';">
                        </p>
                    </display:column>
                </display:table>
            </div>
        </s:form>
        <div id="dialog-form" title="Edit Department">
        </div>
    </body>
</html>
